<!DOCTYPE html>
<html>
    <head>
        <title>snd.js test</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="./snd.js"></script>
        <script src="./TestCanvas.js"></script>
        <script>
            source1 = null; // 動かせる音源
            source2 = null; // BGM

            testCanvas = null; // 描画用クラス

            function setCanvas() {
                // canvasの設定
                testCanvas = new TestCanvas(source1, snd.LISTENER);
                // このメソッドで音源をマウスと連動させている(TestCanvas.js 19行～)
                testCanvas.setOnMouseMove();
                // このメソッドでリスナーの操作を設定している(TestCanvas.js 34行～)
                window.addEventListener("keydown", testCanvas.onkeydown, true);
            }

            window.onload = function() {
                // snd.jsの初期化
                // 初期化前にsnd.LISTENERや各種メソッドを呼び出してもnullでエラーになります。
                snd.init();

                // リスナーはsnd.LISTENERを使う
                // web audio apiのlistenerから拡張してあるので、注意してください
                // TestCanvas.jsの34行目～を参照
                
                // 位置を動すことができる音源を作る(位置の設定はTestCanvas.jsの19行目～を参照)
                source1 = new snd.SoundNode("移動可能音源");
                snd.SOUND_ENVIRONMENT.connectAudioUnit(source1.id, source1);
                // 音データを読み終わったときの処理をあらかじめ設定
                source1.onload = function() {
                    // ループさせるように設定
                    this.setLoop(true);
                    // 再生する
                    this.start(0);
                };

                // ただの音源の場合(BGMなど)
                source2 = new snd.Sound("BGM");
                snd.SOUND_ENVIRONMENT.connectAudioUnit(source2.id, source2);
                source2.onload = function() {
                    this.setLoop(true);
                    this.start(0);
                };

                // 音源データの読み込み開始
                source1.load("./test.wav"); // マッチ箱を振る音
                source2.load("./01 Liftoff (Get High).wav"); //  BGM

                // 描画するキャンバスの設定
                setCanvas();
            };

        </script>
    </head>
    <body>
        <h1>PannerNode</h1>
        <canvas id="canvas" height="480" width="640" style="border: 1px #000000 solid;"></canvas><br>
        canvasの上でマウスを動かすと音源が動きます。<br>
        WASD, JLキーでリスナーの操作が可能です。<br>
        <table>
            <tr><td>W</td><td>↑</td></tr>
            <tr><td>A</td><td>←</td></tr>
            <tr><td>S</td><td>↓</td></tr>
            <tr><td>D</td><td>→</td></tr>
            <tr><td>J</td><td>左回転</td></tr>
            <tr><td>L</td><td>右回転</td></tr>
        </table>
		<br>
		BGM: <a href="http://ocremix.org/info/Pilotwings:_Take_Flight">Take Flight - 01 Liftoff (Get High)</a>
    </body>
</html>
